<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 头部搜索区域 -->
      <el-form ref="search" :model="searchForm">
        <div class="filter-container">
          <el-row>
            <el-col :span="6">
              <el-form-item label="标签名称" prop="tagName">
                <el-input
                  type="text"
                  style="width: 200px"
                  size="small"
                  v-model="searchForm.tname"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态">
                <el-select v-model="searchForm.tstate" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <span>&nbsp;</span>
              <!-- 清除按钮 -->
              <el-button
                class="filter-item resetBtn"
                size="small"
                style="margin-bottom: 0"
                @click="resetForm"
                >清除</el-button
              >
              <!-- 搜索按钮 -->
              <el-button size="small" type="primary" @click="searchList"
                >搜索</el-button
              >
            </el-col>
            <el-col :span="4" style="text-align: right">
              <!-- 新增标签按钮 -->
              <el-button
                size="small"
                type="success"
                icon="el-icon-edit"
                style="margin-left: 10px"
                @click="(dialogVisible = true), (diatitle = '新增标签')"
                >新增标签</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-alert type="info" show-icon style="margin-bottom: 15px">
        <template slot="title">数据一共 {{ total }} 条</template>
      </el-alert>
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
            <!-- {{ row.state }} -->
          </template>
        </el-table-column>
        <el-table-column label="操作" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              class="textBtn"
              @click="changeState({ id: row.id, state: row.state })"
            >
              {{ row.state === 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              type="text"
              size="small"
              class="textBtn"
              :disabled="row.state === 1"
              @click="modifyTags(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              class="textBtn"
              :disabled="row.state === 1"
              @click="delTags(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top: 20px; text-align: right"
        :current-page="page.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="changeSize"
        @current-change="changePage"
      >
      </el-pagination>
    </el-card>
    <!-- 添加弹出层 -->
    <el-dialog
      v-if="diatitle === '新增标签' || '修改标签'"
      :title="diatitle"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <!-- :before-close="handleClose" -->
      <el-form ref="addform" :model="formData" :rules="rules">
        <el-form-item label="所属学科" label-width="80px" prop="subjectID">
          <el-select
            placeholder="请选择"
            style="width: 280px"
            v-model="formData.subjectID"
          >
            <el-option
              v-for="item in subject"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName" label-width="80px">
          <el-input
            v-model="formData.tagName"
            placeholder="请输入标签名称"
            style="width: 280px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="concel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /添加弹出层 -->
  </div>
</template>

<script>
import { list, changeState, add, remove, update } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'

export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      searchForm: {
        tname: '',
        tstate: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      // 表单数据
      formData: {
        subjectID: '',
        tagName: ''
      },
      updateVisable: false,
      dialogVisible: false,
      data: {},
      formInline: {
        user: '',
        region: ''
      },
      list: [],
      total: 0,
      page: {
        page: 1,
        pagesize: 5,
        tagName: '',
        total: 0
      },
      subject: [],
      diatitle: '', // 弹窗的名字
      flag: 0,
      currentID: 0
    }
  },
  computed: {
    // 请求参数
    // requestparm () {
    //   return {
    //     page: this.page.page, // 当前页数
    //     pagesize: this.page.pagesize, // 页尺码
    //     tagName: this.searchForm.tname // 标签名称
    //     // state: this.searchForm.tstate // 状态
    //   }
    // }
  },

  created () {
    this.getList()
    this.getSimpleScience()
  },
  mounted () { },
  watch: {

  },
  methods: {
    // 添加标签按钮
    async btnOK () {
      if (this.diatitle === '新增标签') {
        this.$refs.addform.validate(async (valid) => {
          if (valid) {
            try {
              await add(this.formData)
              this.$message.success('操作成功')
              this.getList()
              // 清空表单信息
              this.formData = {
                tagName: '',
                subjectID: ''
              }
              this.$refs.search.resetFields()
              this.$refs.search.clearValidate()
              this.dialogVisible = false
            } catch (err) {
              console.log(new Error(err))
            }
          }
        })
      } else {
        this.$refs.addform.validate(async (valid) => {
          if (valid) {
            try {
              await update({
                id: this.currentID,
                subjectID: this.formData.subjectID,
                tagName: this.formData.tagName
              })
              this.$message.success('操作成功')
              this.getList()
              // 清空表单信息
              this.formData = {
                tagName: '',
                subjectID: ''
              }
              this.$refs.search.clearValidate()
              this.dialogVisible = false
            } catch (err) {
              console.log(new Error(err))
            }
          }
        })
      }
    },
    // 提交事件

    // 获取标签列表
    async getList () {
      const { data } = await list(this.page)
      // console.log(data)
      this.data = data
      this.list = data.items
      this.total = data.counts
    },
    changeSize (newSize) {
      this.page.pagesize = newSize
      this.page.page = 1
      this.getList()
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getList()
    },
    async changeState (obj) {
      if (obj.state) {
        obj.state = 0
      } else {
        obj.state = 1
      }
      await changeState(obj)
      this.getList()
    },
    async getSimpleScience () {
      const { data } = await simple()
      // console.log(data)
      this.subject = data
      // console.log(this.subject)
      // console.log(this.subject)
    },
    // 弹层取消
    concel () {
      console.log(1)
      this.dialogVisible = false
      this.formData = {
        tagName: '',
        subjectID: ''
      }
      console.log(1)
      this.$refs.search.clearValidate()
      console.log(1)
    },
    // 删除功能
    delTags (id) {
      this.$confirm('此操作将永久删除该题目,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove({ id: id })
          this.$message.success('删除该试题成功！')
          this.getList()
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message.info('用户取消删除！')
      })
    },
    async modifyTags (row) {
      this.dialogVisible = true
      this.formData.subjectID = row.subjectID
      this.formData.tagName = row.tagName
      this.currentID = row.id
      this.diatitle = '修改标签'
    },
    // 重置搜索表单
    resetForm () {
      this.searchForm = {
        tname: '',
        tstate: ''
      }
    },
    searchList () {
      this.page = {
        page: 1,
        pagesize: 5,
        tagName: ''
      }
      if (this.searchForm.tstate === '1' || this.searchForm.tstate === '0') {
        this.page.state = this.searchForm.tstate
      }
      this.page.tagName = this.searchForm.tname
      this.getList()
    }
  }
}
</script>
<style scoped lang="scss">
.btn_wrapper {
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-card {
  border: 0;
}
::v-deep .cell span {
  font-size: 14px;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog__footer {
    padding-bottom: 10px;
    padding-right: 15px;
    text-align: right;
  }
}
</style>
